<template>
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <form class="form-inline" onsubmit="return false;">
                            <div class="form-group">
                                <a class="btn btn-primary m-r-5" href="javascript:void(0)"
                                   @click="openDialogFormVisible"><i class="mdi mdi-plus"></i>添加产品</a>
                            </div>
                        </form>
                    </div>

                    <div class="card-body" v-loading="loading">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    :default-sort="{prop: '_id', order: 'descending'}"
                            >
                                <el-table-column
                                        type="index"
                                        :index="indexMethod"
                                        label="排序"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        label="支付选项标题"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="productName"
                                        label="产品名"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="timeNum"
                                        label="有效期"
                                        :formatter="formatTimeName"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="describe"
                                        label="描述信息"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="价格"
                                        width="60">
                                </el-table-column>
                                <el-table-column
                                        prop="status"
                                        label="产品状态"
                                        :formatter="formatStatus"
                                        width="120">
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="success" @click="handleStatus(scope.row._id,0)" v-if="scope.row.status===1">下架</el-button>
                                        <el-button size="mini" @click="handleStatus(scope.row._id,1)" v-if="scope.row.status===0">上架</el-button>
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.row)">编辑
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>

                            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">
                                    <div class="row">
                                        <el-form-item label="支付选项标题" :label-width="formLabelWidth">
                                            <el-input
                                                    type="txt"
                                                    placeholder="请输入内容"
                                                    v-model="form.title" style="width:80%;">
                                            </el-input>
                                        </el-form-item>
                                    </div>

                                    <div class="row">
                                        <el-form-item label="产品名" :label-width="formLabelWidth">
                                            <el-input
                                                    type="txt"
                                                    placeholder="请输入内容"
                                                    v-model="form.productName" style="width:80%;">
                                            </el-input>
                                        </el-form-item>
                                    </div>

                                    <div class="row">
                                        <el-form-item label="是否单品" :label-width="formLabelWidth">
                                            <el-select v-model="form.type" placeholder="全部">
                                                <el-option
                                                        v-for="item in typeOptions"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <div class="row" v-if="form.type==0">
                                        <div class="col-md-9">
                                            <el-form-item label="有效期" label-width="106px">
                                                <el-input
                                                        type="number"
                                                        placeholder="请输入内容"
                                                        v-model="form.timeNum">
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="col-md-3">
                                            <el-select v-model="form.unit" placeholder="全部">
                                                <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <el-form-item label="描述信息" :label-width="formLabelWidth">
                                            <el-input
                                                    type="textarea"
                                                    placeholder="描述信息"
                                                    v-model="form.describe"
                                                    maxlength="2000"
                                                    show-word-limit
                                                    style="width:80%;">
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="row">
                                        <el-form-item label="有效期说明" :label-width="formLabelWidth">
                                            <el-input
                                                    type="textarea"
                                                    placeholder="有效期说明"
                                                    v-model="form.validityText"
                                                    maxlength="2000"
                                                    show-word-limit
                                                    style="width:80%;">
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="row">
                                        <el-form-item label="提醒事项" :label-width="formLabelWidth">
                                            <el-input
                                                    type="textarea"
                                                    placeholder="提醒事项"
                                                    v-model="form.warnText"
                                                    maxlength="2000"
                                                    show-word-limit
                                                    style="width:80%;">
                                            </el-input>
                                        </el-form-item>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <el-form-item label="原始价格" :label-width="formLabelWidth">
                                                <el-input
                                                        type="number"
                                                        placeholder="原始价格"
                                                        v-model="form.originalPrice" style="width:100%;">
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <div class="col-md-6">
                                            <el-form-item label="价格" :label-width="formLabelWidth">
                                                <el-input
                                                        type="number"
                                                        placeholder="价格"
                                                        v-model="form.price" style="width:80%;">
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <!--<div class="col-md-4">
                                            <el-form-item label="背景图片">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="/api/upload"
                                                        accept="image/gif, image/jpeg, image/png"
                                                        :show-file-list="false"
                                                        :on-error="handleImgUrlError"
                                                        :on-success="handleImgUrlSuccess"
                                                        :before-upload="beforeAvatarUpload">

                                                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-form-item>
                                        </div>-->
                                    </div>


                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submit">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PriceSettingComponent",
        data() {
            return {
                keyword: '',
                pageActive: true,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                activeIndex: 1,
                //这里单位配置请勿修改
                options: [{
                    value: 1,
                    label: '月'
                }, {
                    value: 2,
                    label: '年'
                }],
                typeOptions:[
                    {
                        value:0,
                        label:'否'
                    },
                    {
                        value:1,
                        label:'是'
                    }
                ],

                form: {
                    title: '',
                    productName: '',
                    type:0,
                    timeNum:1,
                    unit: 1,
                    describe: '',
                    validityText:'',
                    originalPrice:1,
                    warnText:'',
                    price: 1,
                    imageUrl:''
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                id: "",
                order: 'desc',
                orderField: '_id',
                dialogTitle:'添加产品'
            }
        },
        methods: {
            search: function () {
                let self = this;
                let uri = 'setting/price-setting/post-list';
                self.loading = true;

                let postData = {
                    keyword: self.keyword,
                    page: self.currentPage,
                    limit: self.pageSize,
                    orderField: self.orderField,
                    order: self.order
                };
                axios.post(uri, postData).then(function (result) {
                    self.total = result.priceSettings.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.priceSettings.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            indexMethod(index) {
                return index + 1;
            },
            openDialogFormVisible() {
                this.dialogFormVisible = true;
                this.form.title = '';
                this.form.productName = '';
                this.form.timeNum = 1;
                this.form.unit = 1;
                this.form.describe = '';
                this.form.price = 1;
                this.form.type = 0;
                this.form.validityText = '';
                this.form.originalPrice = 2;
                this.form.warnText = '';
                this.form.imageUrl = '';
                this.id = "";
                this.dialogTitle = '添加产品';

            }, handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            submit() {
                let self = this;
                let uri = "setting/price-setting/store";
                if (!self.form.title) {
                    self.$message.error("必须填写支付选项标题");
                    return;
                }
                if (!self.form.productName) {
                    self.$message.error("必须填写产品名");
                    return;
                }
                if (self.form.type === 0 && self.form.timeNum<=0) {
                    self.$message.error("有效期不能小于0");
                    return;
                }
                if (self.form.type === 0 && self.form.unit <= 0) {
                    self.$message.error("必须填写单位");
                    return;
                }
                if (!self.form.describe) {
                    self.$message.error("必须填写描述");
                    return;
                }
                if (!self.form.validityText) {
                    self.$message.error("必须填写有效期说明");
                    return;
                }
                if (!self.form.warnText) {
                    self.$message.error("必须填写提醒事项");
                    return;
                }
                self.form.originalPrice = parseFloat(self.form.originalPrice);
                self.form.price = parseFloat(self.form.price);
                if (self.form.price<=0) {
                    self.$message.error("价格不能小于0");
                    return;
                }
                if (self.form.originalPrice<=0) {
                    self.$message.error("原始价格不能小于0");
                    return;
                }
                if (self.form.originalPrice < self.form.price) {
                    self.$message.error("原始价格不能小于现在价格");
                    return;
                }
                self.loading = true;
                let postData = self.form;
                if (!self.id) {
                    self.store(uri, postData);
                } else {
                    uri = "setting/price-setting/" + self.id;
                    self.update(uri, postData);
                }
            },
            store: function (uri, postData) { //保存
                let self = this;

                axios.post(uri,postData).then(function (result) {
                    self.dialogFormVisible = false;
                    self.search();
                }).catch(function (error) {
                    self.dialogFormVisible = false;
                    self.loading = false;
                });
            },
            update: function (uri, postData) { //更新数据
                let self = this;

                axios.put(uri,postData).then(function (result) {
                    self.dialogFormVisible = false;
                    self.search();
                }).catch(function (error) {
                    self.dialogFormVisible = false;
                    self.loading = false;
                });
            },
            getDateTime(date) {
                this.form.dateTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            formatTimeName: function (row, column) {
                let unitTxt  = row.unit === 1 ? '月' : '年';
                return row.timeNum+unitTxt;
            },
            formatStatus:function(row, column){
               return row.status === 0 ? '已下架' : '已上架';
            },
            handleEdit: function (row) {
                this.dialogFormVisible = true;

                this.form.title = row.title;
                this.form.productName = row.productName;
                this.form.timeNum = row.timeNum;
                this.form.type = row.type;
                this.form.unit = row.unit;
                this.form.describe = row.describe;
                this.form.price = row.price;
                this.form.validityText = row.validityText;
                this.form.warnText = row.warnText;
                this.form.originalPrice = row.originalPrice;
                this.form.imageUrl = row.imageUrl;
                this.id = row._id;
                this.dialogTitle = '编辑产品';
            },
            handleStatus: function (id, status) {

                let self = this;
                let uri = "setting/price-setting/" + id + "/" + status;

                axios.get(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.form.imageUrl = response.url;
                    this.loading=false;
                }
                console.log(response)
            },
            beforeAvatarUpload: function (item) {
                this.loading=true;
                console.log(item)
            },
            handleImgUrlError:function(response){
                this.loading=false;
                this.$message.error("上传失败！");
            }
        },
        created: function () {
            this.search();
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-upload__input {
        display: none;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .avatar {
        width: 40px;
        height: 40px;
        display: block;
    }
</style>
